<template>
	<view class="wallet-wrap">
		<uv-navbar title="钱包" bg-color="#fff" :placeholder='true' leftIconSize="20px" leftIconColor="#313C56" rightText="" rightIconColor="#313C56" :autoBack='true'
			titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<view class="wallet-box" :style="{width: $uv.addUnit(screenWidth) - 26}">
			<image class="record-btn" src="../../static/record-btn.png" mode=""></image>
			<view class="bottom flex-row flex-items-center flex-between">
				<view class="amount-box">
					<view class="unit">SPX</view>
					<view class="num">{{ spxAmount }}</view>
				</view>
				<view class="amount-box">
					<view class="unit">USDT</view>
					<view class="num">{{ usdtAmount }}</view>
				</view>
				<view class="recharge-btn flex-row flex-items-center flex-row-center" @click="openPopup">充值</view>
			</view>
		</view>

		<view class="recommend-box">
			<view class="title">推荐购买</view>
			<view class="card-list">
				<view class="card-item flex-column flex-items-center flex-column-center" v-for="(item,index) in nftList" :key="index">

					<view :class="`card-bg ${!item.nftUrl && 'default'}`">
						<image v-if="item.nftUrl" :src="item.nftUrl" mode=""></image>
						<image v-if="!item.nftUrl" src="../../static/card.png" mode=""></image>
					</view>
					<view class="name">{{item.nftType == 1 ? "BOSS NFT" : "游民 NFT"}}</view>

					<view class="bottom-box">
						<view v-if="item.nftStatus == 1" class="have">已拥有</view>
						<view v-if="item.nftStatus == 0" class="btn flex-row flex-row-center flex-items-center" @click="goBuy(item.nftType)">
							去购买
            <image src="../../static/arrow-right-white.png" mode=""></image>
						</view>
					</view>

				</view>
			</view>
		</view>

		<uv-popup ref="popup" mode="bottom" @change="" closeable round="12px" custom-style="height: 406px;">
			<view class="popup-wrap flex-column">
				<view class="head">充值</view>
				<view class="popup-content">
					<uv-tabs :list="tabList" lineColor="#EB7520" activeStyle="font-size: 16px;color: #313C56;"
						inactiveStyle="font-size: 14px;color: #95A4B3;" @change="tabChange"></uv-tabs>
					<view class="tip">
						充值金额
					</view>
					<view class="input-wrap flex-row flex-center flex-items-center">
						<input placeholder="请输入" type="number" v-model="recharge" placeholder-class="placeholder" />
						<text class="unit">{{tabList[tabIndex].name}}</text>
					</view>
				</view>
				<view class="footer">
					<view class="flex-row flex-center flex-items-center" style="width:100%;height: 68px; ">
						<view class="confirm flex-row-center" @click="">
							支付
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
import {
  getUserCenter
} from "../../api";
	export default {
		data() {
			return {
        spxAmount: '0',
        usdtAmount: '0',
        nftList: [],
				recharge: '',
				tabIndex: 0,
				tabList: [{
					name: 'USDT',
				}, {
					name: 'SPX',
				}],
			};
		},
    computed: {
      statusBarHeight() {
        const sys = uni.$uv.sys()
        return sys.statusBarHeight
      },
      navbarHeight() {
        return this.statusBarHeight + 44
      },
      screenWidth() {
        const sys = uni.$uv.sys()
        return sys.windowWidth
      },
      pageHeight() {
        const sys = uni.$uv.sys()
        return sys.windowHeight - this.navbarHeight
      },
      scrollHeight() {
        return this.pageHeight - this.toolbarHeight - 10
      },
      toolbarHeight() {
        const sys = uni.$uv.sys()
        return sys.safeAreaInsets.bottom + 68
      }
    },
    mounted() {
      this.getUserCenter_()
    },
		methods: {
      getUserCenter_() {
        getUserCenter().then((data) => {
          if (data) {
            this.nftList = data.nftVos
            this.spxAmount = data.spxAmount
            this.usdtAmount = data.usdtAmount
          }
        }).catch((res) => {})
      },

			tabChange(val) {
				this.tabIndex = val.index
			},
			openPopup() {
				this.$refs.popup.open();
			},
      goBuy(type) {
        uni.navigateTo({
          url: '/pages/purchase/purchase?id=' + type
        })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wallet-wrap {
		padding: 16px;

		.wallet-box {
			height: 142px;
			border-radius: 12px;
			background-image: url('../../../static/wallet-bg.png');
			background-repeat: no-repeat;
			background-size: 110% 270%;
			background-position: -20px -100px;
			padding: 72px 24px 24px;
			position: relative;
			color: #fff;
			box-sizing: border-box;

			.record-btn {
				position: absolute;
				top: 8px;
				right: 0;
				width: 62px;
				height: 28px;
			}

			.amount-box {
				.unit {
					font-size: 14px;
				}

				.num {
					font-size: 22px;
				}
			}

			.recharge-btn {
				width: 48px;
				height: 24px;
				background: #FFFFFF;
				border-radius: 80px;
				font-size: 12px;
				color: #EB7520;
			}
		}

		.recommend-box {
			.title {
				font-size: 16px;
				margin: 16px 0 12px;
				color: #313C56;
			}

			.card-list {
				flex-wrap: wrap;
				display: flex;

				.card-item {
					margin-right: 40px;

					.card-bg {
						overflow: hidden;
						width: 94px;
						height: 126px;
						border-radius: 8px;
						border: 1px solid #F8D9AB;

						image {

							width: 100%;
							height: 100%;
						}

						&.default {
							border: 1px dashed #F3F5FB;
						}
					}

					.name {
						margin: 8px 0;
						font-size: 14px;
						color: #313C56;
					}

					.bottom-box {
						.have {
							font-size: 12px;
							color: #EB7520;
						}

						.btn {
							font-size: 12px;
							color: #FFFFFF;
							width: 60px;
							height: 20px;
							background-color: #EB7520;
							border-radius: 80px;

							image {
								width: 12px;
								height: 12px;
							}
						}
					}
				}
			}
		}

		.popup-wrap {
			height: 100%;
			padding: 20px 16px 0;
			box-sizing: border-box;

			.head {
				font-size: 18px;
				color: #000000;
			}

			.popup-content {
				flex: 1;

				.tip {
					font-size: 14px;
					color: #313C56;
					margin: 16px 0 8px;
				}

				.input-wrap {
					.placeholder{
						color: #B7C0CA;
					}
					input {
						flex: 1;
						font-size: 16px;
					}

					.unit {
						font-size: 14px;
						color: #313C56;
						margin-left: 4px;
					}
				}
			}

			.footer {
				.confirm {
					width: 303px;
					height: 44px;
					background: #EB7520;
					box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
					border-radius: 80px 80px 80px 80px;
					font-size: 16px;
					color: #FFFFFF;
				}
			}
		}
	}
</style>